import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './types'

import pages from './modules/pages'
import components from './modules/components'

import {
	local
} from '@/utils'

Vue.use(Vuex)

const SAVE_KEY_NAME = 'UserData'

export default new Vuex.Store({
	state: {
		versior: 0.25,
		propsPanel: {
			status: false,
			name: '',
			id: ''
		},
		pickImg: {
			status: false,
			cropperImg: false,
			type: 'backimg',
			callback: null
		},
		pickBgm: {
			status: false,
			isEffect: false,
			callback: null
		},
		h5Config: {
			bgm: ''
		},
		mobile: {
			isMobile: false,
			rem: null
		},
		compId: '',
		top: 0,
		left: 0,
		pickPreview: {
			status: false,
			callback: null
		},
		pickForm: {
			status: false,
			callback: null
		},
		pickFont: {
			status: false,
			callback: null
		},
		pickVedio: {
			status: false,
			callback: null
		},
		proview: false,
		pickInput: {
			status: false,
			callback: null
		},
		pickInteraction: {
			status: false,
			type: 'link',
			callback: null
		},
		pickCountnumber: {
			status: false,
			btn: 'like',
			callback: null
		},
		revoke: [],
		preview: false,
		image_libray: {
			status: false,
			type: 'backimg',
			cropperImg: false,
			callback: null
		},
		pickSubmit: {
			status: false,
			callback: null
		}

	},
	getters: {
		propsPanel: (state) => state.propsPanel,
		pickImg: (state) => state.pickImg,
		pickBgm: (state) => state.pickBgm,
		h5Config: (state) => state.h5Config,
		// pickText: (state) => state.pickText,
		compId: (state) => state.compId,
		top: (state) => state.top,
		left: (state) => state.left,
		pickPick: (state) => state.pickPick,
		pickPreview: (state) => state.pickPreview,
		pickForm: (state) => state.pickForm,
		pickFont: (state) => state.pickFont,
		pickVedio: (state) => state.pickVedio,
		proview: (state) => state.proview,
		pickInput: (state) => state.pickInput,
		pickInteraction: (state) => state.pickInteraction,
		pickCountnumber: (state) => state.pickCountnumber,
		revoke: (state) => state.revoke,
		preview: (state) => state.preview,
		image_libray: (state) => state.image_libray,
		pickSubmit: (state) => state.pickSubmit
	},
	actions: {
		getUserData({
			state,
			commit,
			dispatch
		}) {
			const userData = localStorage.getItem(SAVE_KEY_NAME)
			if (userData) {
				try {
					const mobile = state.mobile
					let curUserData
					if (mobile.isMobile) {
						const pxRegExp = /\b(\d+(\.\d+)?)px\b/
						curUserData = JSON.parse(userData, (key, value) => {
							if (typeof value === 'string' && pxRegExp.test(value)) {
								return value.replace(pxRegExp, ($0, $1) => {
									const val = parseFloat($1) / mobile.rem
									return val + 'rem'
								})
							}
							return value
						})
					} else {
						curUserData = JSON.parse(userData)
					}
					// 避免数据调整造成的错误，旧版本直接舍弃
					if (curUserData.versior && (curUserData.versior >= state.versior)) {
						const pages = curUserData.pages
						commit('INIT_USER_DATA', curUserData)
						if (pages && pages.lists && pages.lists.length) {
							commit('TOGGLE_PAGE', pages.lists[0]['id'])
						}
					} else {
						dispatch('initH5Editor')
					}
				} catch (e) {
					dispatch('initH5Editor')
					console.error('获取数据失败:' + e.message)
				}
			} else {
				dispatch('initH5Editor')
			}
		},
		initH5Editor({
			dispatch,
			commit
		}) {
			dispatch('addNewPage')
				.then((id) => {
					commit('TOGGLE_PAGE', id)
				})
		},
		setH5({
			commit
		}, config) {
			commit('SET_H5_CONFIG', config)
		},
		saveUserData({
			state
		}) {
			const user_data = JSON.stringify({
				versior: state.versior,
				h5Config: state.h5Config,
				pages: {
					lists: state.pages.lists
				}
			})
			
			// 			local.set(SAVE_KEY_NAME, JSON.stringify({
			// 				versior: state.versior,
			// 				h5Config: state.h5Config,
			// 				pages: {
			// 					lists: state.pages.lists
			// 				}
			// 			}))
			console.log('-----------保存数据---------')
			console.log(state.pages.lists)
			console.log('-----------保存数据---------')
		}
	},
	mutations: {
		[types.INIT_USER_DATA](state, userData) {
			state.versior = userData.versior
			Object.assign(state.h5Config, userData.h5Config)
			state.pages.lists = state.pages.lists.concat(userData.pages.lists)
			state.components.lists = userData.pages.lists.reduce((lists, page) => {
				if (page) {
					return lists.concat(page.comps)
				}
			}, [])
		},
		[types.OPEN_PROPS_PANEL](state, {
			id,
			name
		}) {
			state.propsPanel = {
				status: true,
				name: name,
				id: id
			}
		},
		[types.CLOSE_PROPS_PANEL](state) {
			state.propsPanel.status = false
		},
		[types.SET_PICK_IMG](state, payload) {
			if (typeof payload === 'boolean') {
				state.pickImg.status = payload
				state.pickImg.cropperImg = payload
				state.pickImg.type = 'backimg'
			} else {
				Object.assign(state.pickImg, payload)
			}
		},
		[types.SET_PICK_BGM](state, payload) {
			if (typeof payload === 'boolean') {
				state.pickBgm.status = payload
				state.pickBgm.isEffect = payload
			} else {
				Object.assign(state.pickBgm, payload)
			}
		},
		[types.SET_H5_CONFIG](state, config) {
			Object.assign(state.h5Config, config)
		},
		[types.SET_MOBILE](state, mobileConfig) {
			Object.assign(state.mobile, mobileConfig)
		},
		// 测试弹框

		[types.SET_TESTIMG](state, payload) {
			if (typeof payload === 'boolean') {
				state.pickImg.status = payload
			} else {
				Object.assign(state.pickImg, payload)
			}
		},
		[types.SET_COMPID](state, payload) {
			state.compId = payload
		},
		// 这是工具栏的top
		[types.SET_TOOL_TOP](state, topval) {
			state.top = topval
		},
		[types.SET_TOOL_LEFT](state, leftval) {
			state.left = leftval
		},
		// 表单弹框设置
		[types.SET_PICK_FORM](state, payload) {
			if (typeof payload === 'boolean') {
				state.pickForm.status = payload
			} else {
				Object.assign(state.pickForm, payload)
			}

		},
		// 输入框弹框设置
		[types.SET_PICK_INPUT](state, payload) {
			if (typeof payload === 'boolean') {
				state.pickInput.status = payload
			} else {
				Object.assign(state.pickInput, payload)
			}
		},
		// 秀字体弹框设置
		[types.SET_PICK_FONT](state, payload) {
			if (typeof payload === 'boolean') {
				state.pickFont.status = payload
			} else {
				Object.assign(state.pickFont, payload)
			}

		},
		// 视频弹框
		[types.SET_PICK_VEDIO](state, payload) {
			if (typeof payload === 'boolean') {
				state.pickVedio.status = payload
			} else {
				Object.assign(state.pickVedio, payload)
			}
		},
		// 设置预览
		[types.SET_PROVIEW](state, value) {
			state.proview = value
		},
		// 设置互动弹框
		[types.SET_INTERACTION](state, payload) {
			if (typeof payload === 'boolean') {
				state.pickInteraction.status = payload
			} else {
				Object.assign(state.pickInteraction, payload)
			}
		},
		// 设置互动中的计数弹框
		[types.SET_COUNT_NUMBER](state, payload) {
			if (typeof payload === 'boolean') {
				state.pickCountnumber.status = payload
			} else {
				Object.assign(state.pickCountnumber, payload)
			}
		},
		//设置预览的数据
		[types.SET_PREVIEW](state, data) {
			state.preview = data
		},

		// 图片素材库的设置
		[types.IMAGE_LIBRAY](state, payload) {
			if (typeof payload === 'boolean') {
				state.image_libray.status = payload
				state.image_libray.cropperImg = payload
				state.image_libray.type = 'backimg'
			} else {
				Object.assign(state.image_libray, payload)
			}
		},

		// 提交按钮的弹框设置
		[types.SET_PICK_SUBMIT](state, payload) {
			if (typeof payload === 'boolean') {
				state.pickSubmit.status = payload
			} else {
				Object.assign(state.pickSubmit, payload)
			}
		},
	},
	modules: {
		pages,
		components
	},
	strict: process.env.NODE_ENV !== 'production'
})
